<template>
  <div>
    <header class="pesicide-header">农药二维码追溯信息</header>

    <div class="container">
      <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <!-- <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul> -->

        <!-- 轮播图片 -->
        <!-- <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="~/images/workshop.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="~/images/products.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="~/images/products2.jpg">
                    </div>
                </div> -->

        <!-- 左右切换按钮 -->
        <!-- <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a> -->
      </div>
      <div class="mt-1" v-if="isPreview">
        <el-affix :offset="50" style="margin-left: 100%">
          <el-button
            @click="onCancel"
            type="danger"
            icon="Close"
            circle
          ></el-button>
        </el-affix>
      </div>

      <el-descriptions :column="1" :border="true" title="单元识别代码">
        <el-descriptions-item
          label="编码"
          label-class-name="descriptions-item-label"
        >
          {{ id }} <el-tag type="danger" v-if="isPreview">临时数据</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="网址"
          label-class-name="descriptions-item-label"
        >
          {{ href }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="1" :border="true" title="产品信息">
        <template v-for="(value, key) in pesticide" :key="key">
          {{ key }}
          <template
            v-if="
              key == 'id' ||
              key == 'createTime' ||
              key == 'pesticideRegistrationType'
            "
          ></template>
          <template v-else-if="key == 'instructions'">
            <template
              v-for="(value2, key2) in pesticide?.instructions"
              :key="key2"
            >
              <el-descriptions-item label-class-name="descriptions-item-label">
                <template #label>
                  <div class="cell-item">
                    {{ $t(key2) }}
                  </div>
                </template>
                {{ value2 }}
              </el-descriptions-item>
            </template>
          </template>
          <el-descriptions-item
            v-else-if="value"
            label-class-name="descriptions-item-label"
          >
            <template #label>
              <div class="cell-item">
                {{ $t(key) }}
              </div>
            </template>
            {{ value }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
    <div class="center">
      ©2023 湖南省农药协会

      <!-- <el-backtop :right="100" :bottom="100" /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shios } from '@/api/Shios.js';
import {
  categories,
  dosageForms,
  pesticideRegistrationType,
  productionTypes,
  toxicities,
} from '@/store';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElLoading, FormInstance } from 'element-plus';

const route = useRoute();
const router = useRouter();
let href = window.location.href;
const pesticide = ref<Pesticide>();
let id = route.params.id as unknown as string; // Number(route.params.id.slice(11, 15));
console.log(id);

let isPreview = false;
if (id) {
  onMounted(async () => {
    const loadingInstance = ElLoading.service({ fullscreen: true });
    const { data } = await shios.get<Pesticide>('PesicideInfo', { path: id });
    loadingInstance.close();

    console.log(data);
    if (data) {
      pesticide.value = data;
    }
  });
} else {
  let prePes = localStorage.getItem('previewPesticide');
  console.log(prePes);

  if (prePes) {
    isPreview = true;
    let data = JSON.parse(prePes);
    id = `${data.pesticideRegistrationType}${data.registrationNumber.substring(
      2
    )}${data.productionType}000000000000000000000001`;
    href += '/' + id;
    data.pesticideRegistrationType =
      pesticideRegistrationType[data.pesticideRegistrationType];
    data.productionType = productionTypes[data.productionType];
    data.category = categories[data.category];
    data.dosageForm = dosageForms[data.dosageForm];
    data.instructions.toxicityIdentification =
      toxicities[data.instructions.toxicityIdentification];
    pesticide.value = data;
    localStorage.removeItem('previewPesticide');
  } else {
    router.replace({ name: 'NotFound' });
  }
}
function onCancel() {
  window.close();
}
</script>

<style lang="scss" scoped>
.pesicide-header {
  background-color: #2db3d6;
  text-align: center;
  font-size: 25px;
  color: #fff;
  padding: 15px 0;
  width: 100%;
}

body {
  background: rgb(240, 248, 239);
}

h4 {
  padding: 1rem;
}

.pesicide-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

.pesicide-table tr {
  display: flex;
}

.pesicide-table td {
  border: 1px solid #f1f1f1;
  padding: 8px;
  flex: 5;
  width: 100%;
  white-space: normal;
  word-break: break-all;
}

tr td:first-child {
  font-weight: 700;
  color: #076392;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  /*height: 100%;*/
}

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
  flex: 1;
  width: 6em;
}

.margin-top {
  margin-top: 20px;
}
.center {
  text-align: center;
  padding: 1rem;
}
</style>
